<!-- ImgIdMarker.vue -->
<template>
    <div class="wrap">
        <!-- 缩略图导航 -->
        <div class="thumbs">
            <div v-for="(item, idx) in imgList" :key="item.id" @click="current = idx"
                :class="{ active: current === idx }">

                <img :src="item.url" />

                <span> {{ item.name }}</span>
            </div>


        </div>

        <!-- 主图 -->
        <div class="marker-container">
            <img ref="imgEl" :src="currentImg.url" @click="addMarker" />
            <!-- 只渲染当前图的点 -->
            <span v-for="m in currentMarkers" :key="m.id" class="dot" :style="{ left: m.x + '%', top: m.y + '%' }"
                @click.stop="removeMarker(m.id)" />
        </div>
    </div>
</template>

<script setup>
import { ref, computed, defineProps, defineEmits } from 'vue'

const props = defineProps({
    imgList: {
        type: Array, // 每项：{ id: 123, url: 'https://...' }
        required: true
    },
    modelValue: {
        type: Array, // 每项：{ imgId, imgUrl, markers: [{id,x,y}, ...] }
        default: () => []
    },
    maxMarkers: { type: Number, default: Infinity }
})
const emit = defineEmits(['update:modelValue'])

const current = ref(0)
const imgEl = ref(null)

/* 计算属性：当前选中的图片对象 */
const currentImg = computed(() => props.imgList[current.value])

/* 计算属性：当前图片对应的标记数组 */
const currentMarkers = computed(() => {
    const rec = props.modelValue.find(r => r.imgId === currentImg.value.id)
    return rec ? rec.markers : []
})

/* 增 */
function addMarker(e) {

    const { left, top, width, height } = imgEl.value.getBoundingClientRect();

    const currentCount = currentMarkers.value.length

    if (currentCount >= props.maxMarkers) {
        // 简单提示，可换成 Message、Toast 等
        console.log(`本图最多标记 ${props.maxMarkers} 个`)
        return;
    }

    const newPoint = {
        id: Date.now(),
        x: ((e.clientX - left) / width) * 100,
        y: ((e.clientY - top) / height) * 100
    }

    const idx = props.modelValue.findIndex(r => r.imgId === currentImg.value.id)

    if (idx === -1) {
        // 这张图还没有记录，新建一条
        emit('update:modelValue', [
            ...props.modelValue,
            {
                imgId: currentImg.value.id,
                imgUrl: currentImg.value.url,
                markers: [newPoint]
            }
        ])
    } else {
        // 已有记录，追加标记
        const copy = [...props.modelValue]
        copy[idx].markers.push(newPoint)
        emit('update:modelValue', copy)
    }
}

/* 删 */
function removeMarker(pointId) {
    const idx = props.modelValue.findIndex(r => r.imgId === currentImg.value.id)
    if (idx === -1) return
    const copy = [...props.modelValue]
    copy[idx].markers = copy[idx].markers.filter(m => m.id !== pointId)
    emit('update:modelValue', copy)
}
</script>

<style scoped>
/* 追加/替换到 <style scoped> */
.wrap {
    display: flex;
    gap: 8px;
    /* 如果外部没给高度，这里可以写 height: 100% 或固定值 */
    height: 100%;
    /* 关键：先让 wrap 占满父容器 */
}

.thumbs {
    flex-shrink: 0;
    /* 缩略图不压缩 */
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.thumbs div {
    display: flex;
    width: 110px;
    cursor: pointer;
    border: 2px solid transparent;
    flex-direction:column;align-items:start;
    margin-top: 2px;
}

.thumbs div span {
    display: inline;
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 2px;
}

.thumbs div.active {
    border: 2px solid #f7e92b; 
}
.thumbs div img { 
    width: 100%;
    height: 90%;
    object-fit: cover;
}

/* 主图区域：自适应剩余空间，并保持图片原比例 */
.marker-container {
    position: relative;
    /* 给绝对定位的 dot 当参照 */
    flex: 1;
    /* 占满剩余宽/高 */
    display: flex;
    /* 让 img 垂直水平居中 */
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 防止图片过大撑破容器 */
}

.marker-container img {
    /* 关键：让图片“自适应”但不超出父容器 */
    max-width: 100%;
    /* max-height: 100%; */
    object-fit: contain;
    /* 完整显示，不留黑边 */
    cursor: crosshair;
}

.dot {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #f7e92b;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: all;
    /* 保证点击删除可用 */
}
</style>
